<template>
  <view class="bg-white">
    <view class="rounded-16rpx p-20rpx">
      <view class="input-box">
        <text>标题：</text>
        <u-input v-model="formData.title" placeholder="请输入新闻标题" />
      </view>
      <view class="input-box">
        <text>副标题：</text>
        <u-input v-model="formData.sub_title" placeholder="请输入新闻副标题" />
      </view>
      <view class="input-box" style="display: block">
        <text class="my-10rpx">新闻内容：</text>
        <u-textarea
          v-model="formData.content"
          auto-height
          placeholder="请输入新闻内容"
        />
      </view>
    </view>
    <view class="py-20rpx">
      <view class="text-26rpx mx-20rpx text-third mb-20rpx">历史数据</view>
      <view v-if="newsList.length">
        <view
          v-for="i in newsList"
          :key="i._id"
          style="transition: 300ms"
          :class="
            (expandIds.includes(i._id) ? 'h-530rpx' : 'h-78rpx') +
            ' p-20rpx overflow-hidden mb-20rpx bg-white rounded-10rpx'
          "
          @click="handleExpand(i._id)"
        >
          <view class="flex justify-between items-center">
            <text class="text-first text-base truncate">{{ i.title }}</text>
            <view class="text-first text-sm flex items-center w-354rpx">
              {{ i.createTime }}
              <u-icon
                :name="expandIds.includes(i._id) ? 'arrow-up' : 'arrow-down'"
                color="#666"
                size="12"
              ></u-icon>
            </view>
          </view>
          <view class="text-first text-base py-10rpx">
            <view>
              <text>副标题：</text>
              {{ i.sub_title }}
            </view>
          </view>
          <view class="text-first text-base py-10rpx h-300rpx overflow-auto">
            {{ i.content }}
          </view>
          <view class="flex justify-end mt-20rpx">
            <view v-if="0" @click.stop="handle2Publish(i)">
              <u-button type="primary" size="small" text="发布" />
            </view>
            <view class="w-20rpx"></view>
            <view @click.stop="handle2Del(i)">
              <u-button type="error" size="small" text="删除" />
            </view>
          </view>
        </view>
      </view>
      <u-empty
        v-else
        margin-top="36%"
        icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
        text="暂无数据"
      />
    </view>
    <view class="h-200rpx"></view>
    <view class="fixed w-full bottom-0rpx pb-80rpx bg-white px-20rpx">
      <u-button
        color="#386ee8"
        :custom-style="{ borderRadius: '20rpx' }"
        :throttle-time="600"
        text="发布"
        :disabled="btn_disabled"
        :loading="btnLoading"
        @click="handleClickSubmit"
      />
    </view>
  </view>
</template>

<script lang="ts">
import dayjs from 'dayjs'
import { findIndex } from 'lodash-es'
import { Component, Vue } from 'vue-property-decorator'

import { showModal } from '@/utils'

import { getNewsApi, postNewsApi } from './service'

@Component({ name: 'News' })
export default class News extends Vue {
  btnLoading = false
  formData = {
    title: '',
    sub_title: '',
    content: ''
  }
  onLoad() {
    this.getData()
  }
  newsList: Recordable = {}
  async getData() {
    const { data } = await getNewsApi()
    this.newsList = data
  }
  get btn_disabled() {
    const { title, sub_title, content } = this.formData
    return !title || !sub_title || !content
  }
  async handleClickSubmit() {
    this.btnLoading = true
    try {
      await postNewsApi({
        ...this.formData,
        createTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      await showModal({
        content: '发布成功'
      })
      this.getData()
    } finally {
      this.btnLoading = false
    }
  }
  expandIds: Array<any> = []
  handleExpand(id: string) {
    const index = findIndex(this.expandIds, (i) => i === id)
    if (index >= 0) {
      this.expandIds.splice(+index, 1)
      return
    }
    this.expandIds.push(id)
  }
  async handle2Del({ _id }: any) {
    const db: any = wx.cloud.database()
    const { confirm } = await showModal({ content: '确定删除吗？' })
    confirm && (await db.collection('news').where({ _id }).remove())
    this.getData()
  }
  async handle2Publish(i: any) {
    console.log('i', i)
  }
}
</script>

<style scoped lang="scss">
.input-box {
  @apply pb-16rpx;
  border-bottom: 2rpx solid #f6f6f6;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 28rpx;
}
</style>
